// 文章管理=>类别管理
const BASE_URL="http://api-breakingnews-web.itheima.net";
//页面展示
function load(){
  axios.get(`${BASE_URL}/my/article/cates`,{
    headers:{
      Authorization:localStorage.getItem('token')
    }
  }).then(res=>{
    // console.log(res);
    $('tbody').empty()
    //提取内容显示到页面中
    res.data.data.forEach(v => {
      let theTr=`<tr>
      <td>${v.name}</td>
      <td>${v.alias}</td>
      <td>
        <button myid="${v.Id}" data-name="${v.name}" data-alias="${v.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
  
        <button myid="${v.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      </td>
    </tr>`
    $('tbody').append(theTr)
    });
  })
}
load()
//添加类别
$('.add').on('click',function(){
  let index = layer.open({
    type: 1,
    content: add_str, // 弹层里面显示内容
    title: '新增分类',
    area: ['500px', '300px'],
    // 和$.ajax的success效果一样
    success() {
      console.log('success-------------')
        $('.add-form').on('submit',function(e){
e.preventDefault()
let data=$('form').serialize()
axios.post(`${BASE_URL}/my/article/addcates`,data,{
  headers:{
    Authorization:localStorage.getItem('token')
  }
}).then(res=>{
  load()
  layer.msg('添加类别成功', { icon: 1, time: 2000 })
  layer.close(index)
})
        })
    },
  })
})

// 编辑
$('tbody').on('click','.edit',function(){
let id=$(this).attr('myid')
let name=$(this).attr('data-name')
let alias=$(this).attr('data-alias')

// 弹框
let index = layui.layer.open({
  type: 1,
  content: edit_str,
  title: '编辑分类',
  area: ['500px', '300px'],
  success() {
    console.log('successs------------------')
     //展示原先的内容
     $('input[name=name]').val(name)
     $('input[name=alias]').val(alias)

     //注册表单
     $('#edit_form').on('submit',function(e){
e.preventDefault()
//获取新数据
let name = $('#edit_form input[name=name]').val()
let alias = $('#edit_form input[name=alias]').val()
let data = `name=${name}&alias=${alias}&Id=${id}`

//发送更新请求
axios.post(`${BASE_URL}/my/article/updatecate`,data,{
  headers:{
    Authorization:localStorage.getItem('token')
  }
}).then(res=>{
  if(res.data.status===0){
    //弹框
    layer.msg('更新成功',{icon:1})
    // 重新加载
    load()
    //关闭编辑框
    layer.close(index)
  }
})
     })
  },
})
})

//删除
$('tbody').on('click','.delete',function(){
  //通过id删除
  let id = $(this).attr('myid')
  layer.confirm('是否要删除级别?', function (index) {
    axios.get(`${BASE_URL}/my/article/deletecate/${id}`,{
      headers:{
        Authorization:localStorage.getItem('token')
      }
    }).then(res=>{
      layer.msg('删除类别成功', { icon: 1, time: 2000 })

        //收尾2 : 重新加载
        load()
    })
    layer.close(index)
  })
})

// 3. 编辑分类 **********************************************************
// 也要用在弹窗上面
let edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`
/**
 *  字符串 *****************************************************
 */
// 添加类型的 - 弹出层上的 表单标签
let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
</form>`